<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/normalize.css">
    <link rel="stylesheet" href="/css/resource/main.css">
    <script>!function (e) { function t(a) { if (i[a]) return i[a].exports; var n = i[a] = { exports: {}, id: a, loaded: !1 }; return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports } var i = {}; return t.m = e, t.c = i, t.p = "", t(0) }([function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var i = window; t["default"] = i.flex = function (normal, e, t) { var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent, d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.){5,})/i), c = l && parseInt(l[1].split(".").join(""), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi), s = i.devicePixelRatio || 1; p || d && d[1] > 534 || c || (s = 1); var u = normal ? 1 : 1 / s, m = r.querySelector('meta[name="viewport"]'); m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = normal ? "50px" : a / 2 * s * n + "px" }, e.exports = t["default"] }]); flex(false, 100, 1);</script>
</head>

<body>
    <div id="app">
        <div class="query">
            <div class="phone">
                <input type="tel" name="phone" placeholder="请输入手机号" v-model="loginInfo.phone" style="-webkit-appearance: none;">
                <div class="tel">
                    <input type="tel" placeholder="请输入六位验证码" name="sms_code" class="smsCode" v-model="loginInfo.sms" style="-webkit-appearance: none;">
                    <span class="send" @click="handleSend">{{smsText}}</span>
                </div>
                <button @click="handleEnter">登录</button>
            </div>
        </div>
    </div>
    <script src="https://sfile.tl100.com/js/libs/vue.min.js"></script>
    <script src="https://sfile.tl100.com/js/libs/axios.min.js"></script>
    <script>
        var api = axios.create({
            baseURL: 'https://api.tl100.com/exam_signup',
            withCredentials: true,
            timeout: 5000,
            headers: { 'Content-Type': 'application/json;charset=UTF-8' }
        });
        var app = new Vue({
            el: '#app',
            data: {
                smsText: '发送',
                loginInfo: {
                    phone: '',
                    sms: ''
                },
                signUpInfo: {
                    code: ''
                }
            },
            methods: {
                handleSend: function () {
                    if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.loginInfo.phone))) {
                        alert("请输入正确的手机号码！");
                        return false;
                    }
                    if (this.smsSending) {
                        return;
                    }
                    var i = 60;
                    this.smsSending = true;
                    this.smsText = '60s';
                    var timeId = setInterval(() => {
                        i--;
                        this.smsText = (i + 's');
                        if (i == 0) {
                            clearInterval(timeId);
                            this.smsText = '发送';
                            this.smsSending = false;
                        }
                    }, 1000);
                    var vm = this;
                    api.post('/api/user/sendSmsCode', {
                        phone: this.loginInfo.phone,
                    }).then(function (res) {
                        if (res.data.res_code != 1) {
                            alert('发送失败，请稍后重试！');
                            clearInterval(timeId);
                            vm.smsText = '发送';
                            vm.smsSending = false;
                        }
                    }).catch(function (error) {
                    })
                },
                handleEnter: function () {
                 
                    if (this.enter) {
                        return;
                    }
                    if (this.loginInfo.phone == "") {
                        alert('请填写手机号！');
                        return;
                    }
                    if (this.loginInfo.sms == "") {
                        alert('请填写验证码！');
                        return;
                    }
                    var vm = this;
                    this.enter = true;
                    api.post('/api/user/login', {
                        phone: this.loginInfo.phone,
                        sms_code: this.loginInfo.sms
                    }).then(function (res) {
                        if (res.data.res_code == 1) {
                            localStorage.setItem('token', res.data.msg.token);
                            location.replace('/resource/watch?video_id='+localStorage.getItem('video_id'))
                        } else {
                            alert(res.data.msg);
                            vm.enter = false;
                        }
                    })
                        .catch(function (error) {
                            alert('登录超时，请刷新页面重试！');
                            vm.enter = false;
                        });
                }
            }
        })
    </script>
</body>

</html>